<template>
    <div>
        <yx-head :hidden-icon="true" :title="tabBar[selected].title"></yx-head>
        <am-native-tab-container :index.sync="selected">
            <am-native-tab-container-item>
                <div style="flex: 1">
                    <am-tabs
                        v-model="tabSelected"
                        :tabs="['eros示例', 'amui布局', '文件上传','省市区','单选下拉框','多选下拉框']"
                    />
                    <am-native-tab-container :index.sync="tabSelected">
                        <am-native-tab-container-item>
                           <list>
                               <cell>
                                   <eros-demo></eros-demo>
                               </cell>
                           </list>
                        </am-native-tab-container-item>
                        <am-native-tab-container-item>
                            <flex-demo></flex-demo>
                        </am-native-tab-container-item>
                        <am-native-tab-container-item>
                            <!--上传图片与预览-->
                            <upload-demo></upload-demo>
                        </am-native-tab-container-item>
                        <am-native-tab-container-item>
                            <!--省市区-->
                            <province-demo></province-demo>
                        </am-native-tab-container-item>
                        <am-native-tab-container-item>
                            <!--单选下拉框-->
                            <radio-demo></radio-demo>
                        </am-native-tab-container-item>

                        <am-native-tab-container-item>
                            <!--多选下拉框-->
                            <select-demo></select-demo>
                        </am-native-tab-container-item>
                    </am-native-tab-container>
                </div>
            </am-native-tab-container-item>
            <am-native-tab-container-item>
                <list>
                    <cell>
                        <div class="panel">
                            <text class="text">钱包</text>
                        </div>
                    </cell>
                    <cell v-for="index in lists" :key="index">
                        <div class="panel">
                            <text class="text" @click="test(index)">{{index}}</text>
                        </div>
                    </cell>
                </list>
            </am-native-tab-container-item>
            <am-native-tab-container-item>
                <div>
                    <div class="panel">
                        <text class="text" @click="test('我')">我</text>
                    </div>
                </div>
                <div>
                    <div class="panel">
                        <text class="text" @click="test('我')">我</text>
                    </div>
                </div>
            </am-native-tab-container-item>
        </am-native-tab-container>
        <am-tab-bar
            icon-font-family="testIcon"
        >
            <am-tab-bar-item
                v-for="(item, index) in tabBar"
                :key="item.title"
                :icon="item.icon"
                :title="item.title"
                :selected="selected === index"
                @click="selected = index"
            />
        </am-tab-bar>
        <div :style="barBottomItemStyle"></div>
    </div>
</template>

<style scoped lang="less">
    .panel {
        width: 600px;
        height: 300px;
        margin-left: 75px;
        margin-top: 35px;
        margin-bottom: 35px;
        flex-direction: column;
        justify-content: center;
        border-width: 2px;
        border-style: solid;
        border-color: rgb(162, 217, 192);
        background-color: rgba(162, 217, 192, 0.2);
    }
    .text {
        font-size: 50px;
        text-align: center;
        color: #41B883;
    }
</style>

<script>
    import { AmNavBar, AmTabBar, AmTabBarItem,
        AmNativeTabContainer, AmNativeTabContainerItem,
        AmTabs }  from 'Amui'
    const dom = weex.requireModule('dom')
    import ErosDemo from 'ErosDemo/index'
    import {FlexDemo, UploadDemo} from 'YxDemo'
    import {YxHead,YxUpload,YxProvince} from 'Components'
    import AmButton from "../weex-amui/packages/am-button/index";
    import ProvinceDemo from "./yx-demo/province-demo/index";
    import RadioDemo from "./yx-demo/radio-demo/index";
    import SelectDemo from "./yx-demo/select-demo/index";


    var config = weex.config.eros


    export default {
        components: {
            SelectDemo,
            RadioDemo,
            ProvinceDemo,
            UploadDemo,
            AmButton,
            YxProvince, YxUpload, FlexDemo, ErosDemo, YxHead, AmNavBar, AmTabBar, AmTabBarItem, AmNativeTabContainer, AmNativeTabContainerItem, AmTabs },
        data () {
            return {
                selected: 0,
                tabSelected: 5,
                province:null,
                tabBar: [
                    {
                        icon: 'e659',
                        title: '首页'
                    },
                    {
                        icon: 'e606',
                        title: '客户'
                    },
                    {
                        icon: 'e619',
                        title: '我'
                    }
                ],
                lists: [
                    'First', 'Second', 'Third', 'Fourth',
                    'Fifth', 'Sixth', 'Seventh', 'Eighth'
                ],
                barBottomItemStyle: {
                    height:config.touchBarHeight,
                    width:750,
                    backgroundColor:'white'
                },
                uploadParams:{
                    val:'45'
                }
            }
        },
        beforeCreate () {

            var param = {loginCode: 'name', password: 'hello'}
            // // 示例
            // this.$post({
            //     name: 'login.login', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
            //     data: param,
            // }).then(resData => {
            //     // 成功回调
            //     console.log(resData)
            // }, error => {
            //     // 错误回调
            //     console.log(error)
            // })



            dom.addRule('fontFace', {
                'fontFamily': 'iconfont',
                'src': "url('https://at.alicdn.com/t/font_1100792_poljkfw3bqd.ttf')"
            })
        },
        methods: {
            test (msg = 'test') {

            }
        },
        watch:{
            uploadParams(){

            }
        }
    }
</script>
